import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { Span } from '@zendeskgarden/react-typography';
import { SpanStory } from './stories/SpanStory';
import README from '../README.md';

<Meta
  title="Packages/Typography/Span"
  component={Span}
  subcomponents={{ 'Span.Icon': Span.Icon, 'Span.StartIcon': Span.StartIcon }}
/>

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="Span"
    args={{ children: 'Text', hasIcon: false, hasStartIcon: false }}
    argTypes={{
      hidden: { control: 'boolean' },
      hue: { control: 'color' },
      tag: { control: 'text' },
      hasIcon: { name: 'Span.Icon', table: { category: 'Story' } },
      hasStartIcon: { name: 'Span.StartIcon', table: { category: 'Story' } }
    }}
  >
    {args => <SpanStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
